﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>FooTable - jQuery plugin for responsive HTML tables</title>
    <meta name="viewport"
          content="width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no"/>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
    <link href="../css/footable.core.css?v=2-0-1" rel="stylesheet" type="text/css"/>
    <link href="css/footable-demos.css" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script>
        if (!window.jQuery) {
            document.write('<script src="js/jquery-1.9.1.min.js"><\/script>');
        }
    </script>
    <script src="../js/footable.js?v=2-0-1" type="text/javascript"></script>
    <script src="../js/footable.sort.js?v=2-0-1" type="text/javascript"></script>
    <script src="../js/footable.filter.js?v=2-0-1" type="text/javascript"></script>
    <script src="../js/footable.paginate.js?v=2-0-1" type="text/javascript"></script>
    <script src="js/bootstrap-tab.js" type="text/javascript"></script>
    <script src="js/demos.js" type="text/javascript"></script>
</head>
<body>
<div class="demo-container">
    <ul class="breadcrumb">
        <li><a href="http://fooplugins.com/plugins/footable-jquery/">FooTable</a> <span class="divider">&raquo;</span>
        </li>
        <li><a href="index.htm">Demos</a> <span class="divider">&raquo;</span></li>
        <li class="active">Reset</li>
    </ul>
    <div class="alert">
        Reset FooTable so you can change the columns that are shown in the table
    </div>
    <ul class="nav nav-tabs">
        <li class="active"><a href="#demo">Demo</a></li>
        <li><a href="#docs">Docs</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="demo">
            <p>
                <a href="#reset" class="reset" title="Reset">[Add another column]</a>
            </p>
            <table class="table demo" data-filter="#filter" data-page-size="5">
                <thead>
                <tr>
                    <th data-toggle="true">
                        First Name
                    </th>
                    <th>
                        Last Name
                    </th>
                    <th data-hide="phone,tablet">
                        Job Title
                    </th>
                    <th data-hide="phone,tablet" data-name="Date Of Birth">
                        DOB
                    </th>
                    <th data-hide="phone">
                        Status
                    </th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>Isidra</td>
                    <td><a href="#">Boudreaux</a></td>
                    <td>Traffic Court Referee</td>
                    <td data-value="78025368997">22 Jun 1972</td>
                    <td data-value="1"><span class="status-metro status-active" title="Active">Active</span></td>
                </tr>
                <tr>
                    <td>Shona</td>
                    <td>Woldt</td>
                    <td><a href="#">Airline Transport Pilot</a></td>
                    <td data-value="370961043292">3 Oct 1981</td>
                    <td data-value="2"><span class="status-metro status-disabled" title="Disabled">Disabled</span></td>
                </tr>
                <tr>
                    <td>Granville</td>
                    <td>Leonardo</td>
                    <td>Business Services Sales Representative</td>
                    <td data-value="-22133780420">19 Apr 1969</td>
                    <td data-value="3"><span class="status-metro status-suspended" title="Suspended">Suspended</span>
                    </td>
                </tr>
                <tr>
                    <td>Easer</td>
                    <td>Dragoo</td>
                    <td>Drywall Stripper</td>
                    <td data-value="250833505574">13 Dec 1977</td>
                    <td data-value="1"><span class="status-metro status-active" title="Active">Active</span></td>
                </tr>
                <tr>
                    <td>Maple</td>
                    <td>Halladay</td>
                    <td>Aviation Tactical Readiness Officer</td>
                    <td data-value="694116650726">30 Dec 1991</td>
                    <td data-value="3"><span class="status-metro status-suspended" title="Suspended">Suspended</span>
                    </td>
                </tr>
                <tr>
                    <td>Maxine</td>
                    <td><a href="#">Woldt</a></td>
                    <td><a href="#">Business Services Sales Representative</a></td>
                    <td data-value="561440464855">17 Oct 1987</td>
                    <td data-value="2"><span class="status-metro status-disabled" title="Disabled">Disabled</span></td>
                </tr>
                <tr>
                    <td>Lorraine</td>
                    <td>Mcgaughy</td>
                    <td>Hemodialysis Technician</td>
                    <td data-value="437400551390">11 Nov 1983</td>
                    <td data-value="2"><span class="status-metro status-disabled" title="Disabled">Disabled</span></td>
                </tr>
                <tr>
                    <td>Lizzee</td>
                    <td><a href="#">Goodlow</a></td>
                    <td>Technical Services Librarian</td>
                    <td data-value="-257733999319">1 Nov 1961</td>
                    <td data-value="3"><span class="status-metro status-suspended" title="Suspended">Suspended</span>
                    </td>
                </tr>
                <tr>
                    <td>Judi</td>
                    <td>Badgett</td>
                    <td>Electrical Lineworker</td>
                    <td data-value="362134712000">23 Jun 1981</td>
                    <td data-value="1"><span class="status-metro status-active" title="Active">Active</span></td>
                </tr>
                <tr>
                    <td>Lauri</td>
                    <td>Hyland</td>
                    <td>Blackjack Supervisor</td>
                    <td data-value="500874333932">15 Nov 1985</td>
                    <td data-value="3"><span class="status-metro status-suspended" title="Suspended">Suspended</span>
                    </td>
                </tr>
                </tbody>
                <tfoot class="hide-if-no-paging">
                <tr>
                    <td colspan="5">
                        <div class="pagination pagination-centered"></div>
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
        <div class="tab-pane" id="docs">
            <h4>Reset</h4>

            <p>After you have initialized a FooTable, you might need to "reset" it. One reason could be that you are changing the columns in the table after an AJAX call. In this case you would need to call the reset method of FooTable:</p>
            <pre>$(&#39;.footable&#39;).data(&#39;footable&#39;).reset();</pre>

            <h5>Example</h5>
            <p>In this demo, I reset the FooTable, then add a column onto the table structure, and then initialize FooTable again afterwards:</p>
            <pre>$(&#39;.reset&#39;).click(function (e) {
	e.preventDefault();

	extraCols++;

	$(&#39;table&#39;).data(&#39;footable&#39;).reset();

	//Add a new column into the table header
	$(&#39;table thead tr&#39;).append(&#39;&lt;/tr&gt;&lt;th data-hide=&quot;phone,tablet&quot;&gt;Column &#39; + extraCols + &#39;&lt;/th&gt;&#39;);
	//add data into the table for the new column
	$(&#39;table tbody tr&#39;).each(function(i) {
		$(this).append(&#39;&lt;td&gt;&#39;+ extraCols + &#39;.&#39; + i +&#39;&lt;/td&gt;&#39;);
	});
	//fix the colspan of the footer to cater for the new column
	$(&#39;table tfoot tr td&#39;).attr(&#39;colspan&#39;, 5+extraCols);

	$(&#39;table&#39;).footable();
});</pre>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $('table').footable();

        var extraCols = 0;

        $('.reset').click(function (e) {
            e.preventDefault();

            extraCols++;

            $('table').data('footable').reset();

            //Add a new column into the table header
            $('table thead tr').append('</tr><th data-hide="phone,tablet">Column ' + extraCols + '</th>');
            //add data into the table for the new column
            $('table tbody tr').each(function(i) {
                $(this).append('<td>'+ extraCols + '.' + i +'</td>');
            });
            //fix the colspan of the footer to cater for the new column
            $('table tfoot tr td').attr('colspan', 5+extraCols);

            $('table').footable();
        });
    });
</script>
</body>
</html>
